<template>
  <div class="container">
    <!-- 封装的elememt表格组件 -->
    <e-table :tableHeadConfig="tableHeadConfig" :tableLoadData="tableData">
      <template v-slot:operation="slotData">
        <el-button
          type="primary"
          size="mini"
          @click="jumpuserdetail(slotData.data.row)"
          >用户详情</el-button
        >
      </template>
      <template v-slot:imgurl="slotData">
        <img
          :src="
            slotData.data.row.avatar_url == null
              ? 'https://img.zcool.cn/community/01dc1b58ae3d6ca801219c77314f09.png@2o.png'
              : slotData.data.row.avatar_url
          "
          style="width: 35px; border-radius: 50%"
          alt=""
        />
      </template>
      <template v-slot:nickname="slotData">
        <span>{{
          slotData.data.row.nickname == null
            ? "未授权用户"
            : slotData.data.row.nickname
        }}</span>
      </template>
      <template v-slot:openid="slotData">
        <a
          @click="copyUrl(slotData.data.row.openid)"
          style="color: rgba(27, 108, 232, 100)"
          >复制openid</a
        >
      </template>
    </e-table>
  </div>
</template>

<script>
import eTable from "../../components/ElementTable/index.vue";
export default {
  data() {
    return {
      tableHeadConfig: [
        {
          label: "ID",
          field: "id", //列的对应值
        },
        {
          label: "用户",
          columnType: "slot", //定义当前列为插槽
          slotName: "imgurl", //定义当前列插槽的名字
        },
        {
          label: "用户名",
          columnType: "slot",
          slotName: "nickname",
        },
        {
          label: "OpenId",
          columnType: "slot",
          slotName: "openid",
        },
        {
          label: "创建时间",
          field: "created_at",
          sortable: true, //定义当前列的排序
        },
        {
          label: "操作",
          columnType: "slot",
          slotName: "operation",
          width: 260,
        },
      ],
      tableData: [
        {
          id: 1,
          name: "张三",
          Machine_test_one: 99,
          written_examination_one: 89,
          Machine_test_two: 77,
          Machine_test_three: 69,
          written_examination_two: 84,
          Machine_test_four: 82,
        },
      ],
    };
  },
  methods: {},
  components: {
    eTable
  },
};
</script>

